<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var flag=true;

	window.onload=function(){
		var canvas = document.getElementById("mycanvas");
		var ctx=canvas.getContext("2d");
		ctx.strokeStyle="#ff0000";
		ctx.beginPath();
		ctx.arc(100,200,45,0, Math.PI*1.5, Math.PI*1.2, false);
		ctx.stroke();
		ctx.closePath();
		
		//콘형
		ctx.strokeStyle="#0000ff";
		ctx.lineWidth="5";
		ctx.fillStyle="#aaaaff";
		ctx.beginPath();
		ctx.moveTo(300,250);
		ctx.arc(300,200,45, Math.PI*0, Math.PI*1.0, true);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();

		//그래프
		ctx.fillStyle="#00ffff";
		ctx.fillRect(200,350,100,200)
		ctx.fillRect(300,450,100,100)
		ctx.fillRect(400,380,100,170)
		ctx.fillRect(500,420,100,130)
		
		
		ctx.strokeStyle="#ff0000";
		ctx.beginPath();
		ctx.moveTo(100,100);
		ctx.lineTo(200,0);
		ctx.moveTo(200,0);
		ctx.lineTo(300,100);
		ctx.moveTo(300,100);
		ctx.lineTo(400,70);
		ctx.moveTo(400,70);
		ctx.lineTo(500,200);
		ctx.moveTo(500,200);
		ctx.lineTo(600,70);
		ctx.closePath();
		ctx.stroke();
		
		//팩맨
		setInterval("pak()", 100);
	}
	
	
	function pak(){
		var canvas = document.getElementById("mycanvas");
		var ctx=canvas.getContext("2d");
		
		//팩맨
		if(flag){
			ctx.strokeStyle="#0000ff";
			ctx.lineWidth="5";
			ctx.fillStyle="#ffaaff";
			
			ctx.beginPath();
			ctx.moveTo(500,300);
			ctx.clearRect(500,250,100,100);
			ctx.arc(500,300,45, Math.PI*1.9, Math.PI*2.1, true);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			
			ctx.strokeStyle="#0000ff";
			ctx.lineWidth="5";
			ctx.fillStyle="#aaaaff";
			ctx.beginPath();
			ctx.arc(490,280,10, Math.PI*0, Math.PI*2.0, true);
			ctx.closePath();
			ctx.fill();	
			flag=false;
		}else{
			ctx.strokeStyle="#0000ff";
			ctx.lineWidth="5";
			ctx.fillStyle="#ffaaff";
			ctx.beginPath();
			ctx.moveTo(500,300);
			//ctx.clearRect(500,300,100,100);
			ctx.arc(500,300,45, Math.PI*0, Math.PI*2.0, true);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
	
			
			ctx.strokeStyle="#0000ff";
			ctx.lineWidth="5";
			ctx.fillStyle="#aaaaff";
			ctx.beginPath();
			ctx.arc(490,280,10, Math.PI*0, Math.PI*2.0, true);
			ctx.closePath();
			ctx.fill();
			
			flag=true;
		}
		
	}

</script>
</head>
<body>
	<canvas id="mycanvas" width="600px" height="500px">
	</canvas>
</body>
</html>